<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}">热门行程</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <header th:replace="fragments/header :: header"></header>

    <main class="container">
        <h1 th:text="${title}" style="font-size: 36px;"></h1>
        <div class="trip-list" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem;">
            <div class="trip-card" th:each="trip : ${trips}">
                <img th:src="@{${trip.imagePath}}" alt="行程图片" 
                     style="width: 100%; height: 280px; object-position: center;">
                <h3 th:text="${trip.name}" style="font-size: 32px; color: #c45e00;"></h3>
                <p th:text="${trip.description}" style="font-size: 26px; line-height: 1.6;"></p>
                <div class="button-container">
                    <a th:href="@{/trip-detail(id=${trip.id})}" class="cta-button" style="text-decoration: none;">查看详情</a>
                </div>
            </div>
        </div>
    </main>

    <footer th:replace="fragments/footer :: footer"></footer>
    <script>
        function setMainPadding() {
            const footer = document.querySelector('footer');
            const main = document.querySelector('main.container');
            const footerHeight = footer.offsetHeight;
            main.style.paddingBottom = footerHeight + 'px';
        }

        // 页面加载完成时设置
        window.addEventListener('load', setMainPadding);
        // 窗口大小改变时重新设置
        window.addEventListener('resize', setMainPadding);
    </script>
</body>
</html>